<script setup lang="ts">
import { useEcharts } from '@hooks/useChart'
import type { EChartsCoreOption } from 'echarts/core'
import { ref, Ref, onMounted } from 'vue'

// interface CoverageProps {
//   width: number | string
//   height: number | string
// }
// const props = defineProps<CoverageProps>()
const coverage: Ref<null | HTMLElement> = ref(null)

const percentage: string = '70%'
console.log(coverage.value)

const init = () => {
  const options :EChartsCoreOption = {
    title: {
      text: '店铺覆盖率：' + percentage,
      left: 'center',
      bottom: 0,
      textStyle: {
        fontWeight: '400',
        fontSize: 12
      }
    },
    backgroundStyle: {
      clolor: '#fff'
    },
    series: [
      {
        type: 'liquidFill',
        radius: '75%',
        data: [0.7],
        label: {
            // color: "rgba(0,0,0,0)",
            // insideColor: "rgba(0,0,0,0)",
            fontSize: 20,
            fontWeight: 'bold'
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 1,
                color: ['#328CDA'] // 0% 处的颜色
              },
              {
                offset: 0,
                color: ['#9DC9FF'] // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],

        outline: {
          show: true,
          borderDistance: 5,
          itemStyle: {
            borderColor: '#54B3FC',
            borderWidth: 2
          }
        }
      }
    ]
  }
  useEcharts(coverage.value as HTMLElement, options)
}

onMounted(init)
</script>
<template>
  <div
    ref="coverage"
    :style="{
      width: '160px',
      height: '160px'
    }"
    style="margin: 0 auto"
  ></div>
</template>
<style lang="scss"></style>
